<template>
  <view class="detail-container">
    <view class="loading" v-if="orderInfo.loading">加载中...</view>
    <!-- 交车信息 -->
    <ve-card title="交车信息" type="none" fold v-else-if="orderInfo.giveCarInfoDto">
      <ve-cell-val label="交车里程" :value="orderInfo.giveCarInfoDto.giveCarMileage" unit="公里" />
      <ve-cell-val label="交车油(电)量" :value="orderInfo.giveCarInfoDto.giveFuelAmount" />
      <ve-cell-val label="交车人" :value="orderInfo.giveCarInfoDto.giveStaffName" />
      <ve-cell-val label="交车时间" :value="orderInfo.giveCarInfoDto.giveCarTime" />
      <ve-cell label="交车照片" layout="vertical">
        <ve-upload disabled v-model="orderInfo.giveCarInfoDto.giveFileIds"></ve-upload>
      </ve-cell>
      <ve-cell label="交车视频" layout="vertical">
        <ve-upload-video v-model="orderInfo.giveCarInfoDto.giveVideoFileIds" :readonly="true" />
      </ve-cell>
      <ve-cell-val label="交车备注" :value="orderInfo.giveCarInfoDto.remark" />
    </ve-card>
    <ve-empty v-else></ve-empty>

    <!-- 还车信息 -->
    <ve-card title="还车信息" type="none" fold v-if="orderInfo.returnCarInfoDto">
      <ve-cell-val label="还车里程" :value="orderInfo.returnCarInfoDto.returnCarMileage" unit="公里" />
      <ve-cell-val label="还车油(电)量" :value="orderInfo.returnCarInfoDto.returnFuelNum" />
      <ve-cell-val label="还车人" :value="orderInfo.returnCarInfoDto.returnStaffName" />
      <ve-cell-val label="还车时间" :value="orderInfo.returnCarInfoDto.returnCarTime" />
      <ve-cell label="还车照片" layout="vertical">
        <ve-upload v-model="orderInfo.returnCarInfoDto.returnFileIds" disabled />
      </ve-cell>
      <ve-cell label="还车视频" layout="vertical">
        <ve-upload-video v-model="orderInfo.returnCarInfoDto.returnVideoFileIds" :readonly="true" />
      </ve-cell>
      <ve-cell-val label="还车备注" :value="orderInfo.giveCarInfoDto.remark" />
    </ve-card>
  </view>
</template>

<script setup>
  import { onMounted, ref } from 'vue'
  import { getOrdrDetailsAPI } from '@/api/order/lOrder'

  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })

  const orderInfo = ref({
    loading: true,
  })
  const getDetail = async () => {
    const id = props.orderId
    const res = await getOrdrDetailsAPI({ id: id })
    if (res.code == 200) {
      const result = res.result
      orderInfo.value = result.orderInfo
    }
  }

  onMounted(() => {
    getDetail()
  })
</script>

<style lang="scss" scoped>
  .loading {
    text-align: center;
  }
  .detail-container {
    padding: 24rpx;
  }
</style>
